import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { Button, Dialog, Form, Input } from '@alifd/next';
import { t } from '@lingui/macro';
import { uniqueId } from 'lodash';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { column } from './stores/definitions_sendCar';
import TauActionPanel from '@/components/TauActionPanel';

const tableId = uniqueId('tauTable-');

const DriverInput = (props) => {
  const { name, value, record, ...cfg } = props;
  const [showDialog, setShowDialog] = useState(false);

  const closeDialog = () => {
    setShowDialog(false);
  };

  const handleDriverPicked = (driverInfo) => {
    const newValue = {
      driver: driverInfo?.fullname,
      carrierDriverPhone: driverInfo?.phone,
      // carrierDriverHKPhone: driverInfo?.hkPhone || '',
      driverId: driverInfo?.username,
      carrierVehicle: driverInfo?.id,
      licenseNo: driverInfo?.licenseNo,
    };
    cfg.onChange?.(newValue);
  };

  const handleDriverName = (v) => {
    cfg.onChange?.({ driver: v });
  };

  return (
    <>
      <Form.Item
        name={name}
        {...cfg.itemProps}
        {...cfg.itemLayout}
      >
        <Input.Group addonAfter={<Button onClick={() => setShowDialog(true)}>{t`选择司机`}</Button>}>
          <Input value={value} style={{ width: '100%' }} onChange={handleDriverName} />
        </Input.Group>
      </Form.Item>
      <SendCarDialog
        visible={showDialog}
        record={record}
        onClose={closeDialog}
        onChange={handleDriverPicked}
      />
    </>
  );
};

const SendCarDialog = observer((props) => {
  const { visible, record, onClose, onChange } = props;
  const { ORDER: order, FORM: formData } = record;
  const { orderChangeStore: store } = useStore();

  const handleOnSearch = (params) => {
    const { ...searchArgs } = params?.values;
    store._sendCarArgs.search = {
      companyId: record?.companyId,
      portId: 0,
      predictBeginDate: formData?.predictBeginDate,
      predictEndDate: order?.ccOrder?.predictEndDate,
      ...searchArgs,
    };
  };

  return (
    <>
      <Dialog
        v2
        title={t`任务:${record?.taskId}派车`}
        visible={visible}
        onClose={() => onClose()}
        footer={false}
        width="800px"
      >
        <TauActionPanel
          onSearch={handleOnSearch}
          keywordSearch={{
            placeholder: t`请输入关键字搜搜`,
          }}
          className="action-panel"
        />
        <TauTable
          instanceId={tableId}
          primaryKey="idx"
          tableLayout="fixed"
          currentPage={store._sendCarArgs.pg.page}
          pageSize={store._sendCarArgs.pg.size}
          total={store._sendCarArgs.total}
          sort={store._sendCarArgs.tableSort}
          onFetch={(pg) => { store._sendCarArgs.pg = pg; }}
          loading={store._sendCarArgs.loading}
          dataSource={toJS(store._sendCarArgs.dataSource)}
          columns={[
            { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store._sendCarArgs.idx(i) },
            column('fullname', { width: 58 }),
            column('showCar', { width: 100 }),
            {
              title: t`操作`,
              dataIndex: 'id',
              width: 100,
              cell: (_, __, r) => (
                <>
                  <Button
                    text
                    type="primary"
                    onClick={() => {
                      onChange(r);
                      onClose();
                    }}
                  >
                    {t`派车`}
                  </Button>
                </>
              ),
            },
          ]}
        />
      </Dialog>
    </>
  );
});

export default DriverInput;
